<!--
Copyright 2013 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<!DOCTYPE html>
<html i18n-values="dir:textdirection;lang:language">
<head>
  <meta charset="utf-8">
  <title i18n-content="Media Internals"></title>
  <link rel="stylesheet" href="media_internals.css">
  <script src="chrome://resources/js/cr.js"></script>
  <script src="chrome://resources/js/cr/ui.js"></script>
  <script src="chrome://resources/js/cr/ui/focus_outline_manager.js"></script>
  <script src="chrome://resources/js/util.js"></script>
  <script src="chrome://resources/js/cr/ui/tabs.js"></script>
  <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
  <link rel="stylesheet" href="chrome://resources/css/tabs.css">
</head>

<body>
  <tabbox>
    <tabs>
      <tab>Players</tab>
      <tab>Audio</tab>
      <tab>Video Capture</tab>
    </tabs>
    <tabpanels>
      <tabpanel id="players">
        <button id="save-log-button" style="display:none">Save log</button>
        <div id="list-wrapper">
          <div id="player-list-wrapper">
            <h2>Recent Players</h2>
            <ul id="player-list" class="show-none-if-empty"></ul>
          </div>
        </div>
        <div class="property-wrapper">
          <h2>
            Player Properties
            <button class="copy-button">Copy to clipboard</button>
          </h2>
          <table id="player-property-table">
            <thead>
              <tr>
                <th>Property</th>
                <th>Value</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
        <div id="log-wrapper">
          <h2>
            Log <input id="filter-text" type="text" placeholder="property filter">
          </h2>
          <table id="log">
            <thead>
              <tr>
                <th class="timestamp">Timestamp</th>
                <th>Property</th>
                <th>Value</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
        <ul id="graphs"></ul>
      </tabpanel>
      <tabpanel id="audio">
        <div id="audio-component-list-wrapper">
          <h2>Input Controllers</h2>
          <ul id="audio-input-controller-list" class="show-none-if-empty"></ul>
        </div>
        <div id="audio-component-list-wrapper">
          <h2>Output Controllers</h2>
          <ul id="audio-output-controller-list" class="show-none-if-empty"></ul>
        </div>
        <div id="audio-component-list-wrapper">
          <h2>Output Streams</h2>
          <ul id="audio-output-stream-list" class="show-none-if-empty"></ul>
        </div>
        <div class="property-wrapper">
          <h2>
            <span id="audio-property-name"></span> Properties
            <button class="copy-button">Copy to clipboard</button>
          </h2>
          <table id="audio-property-table">
            <thead>
              <tr>
                <th>Property</th>
                <th>Value</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </tabpanel>
      <tabpanel id="video-capture">
        <div id="video-capture-capabilities-wrapper">
          <h2>
            <span>Video Capture Device Capabilities</span>
            <button id="video-capture-capabilities-copy-button">
              Copy to clipboard
            </button>
          </h2>
          <table id="video-capture-capabilities-table">
            <thead>
              <tr>
                <th>Device Name</th>
                <th>Formats</th>
                <th>Capture API</th>
                <th>Device ID</th>
              </tr>
            </thead>
            <tbody id="video-capture-capabilities-tbody" class="show-none-if-empty"></tbody>
          </table>
        </div>
      </tabpanel>
    </tabpanels>
  </tabbox>
  <textarea id="clipboard-textarea" class="hiddenClipboard"></textarea>
  <script src="media_internals.js"></script>
</body>
</html>
